<template>
  <div class="allocate-order">
<el-card shadow="never" class="search-card">
  <div class="search-bar">
    <!-- 第一行 -->
    <div class="search-row">
      <el-select v-model="outName" placeholder="调出仓库" class="search-item" clearable filterable>
        <el-option label="全部" value=""></el-option>
        <el-option
          v-for="(item, index) in warehouseList"
          :key="'out-' + index"
          :label="item"
          :value="item"
        />
      </el-select>

      <el-select v-model="inName" placeholder="调入仓库" class="search-item" clearable filterable>
        <el-option label="全部" value=""></el-option>
        <el-option
          v-for="(item, index) in warehouseList"
          :key="'in-' + index"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-input v-model="goodsCode" placeholder="商品编码" class="search-item" clearable />
    </div>

    <!-- 第二行 -->
    <div class="search-row">
      <el-input v-model="name" placeholder="商品名称" class="search-item" clearable />

      <el-select v-model="status1" placeholder="审核状态" class="search-item" clearable>
        <el-option label="全部" value=""></el-option>
        <el-option label="未审核" value="1"></el-option>
        <el-option label="审核通过" value="2"></el-option>
        <el-option label="审核未通过" value="3"></el-option>
      </el-select>

      <el-date-picker
        v-model="transferDate"
        type="datetime"
        placeholder="选择调拨日期时间"
        class="search-item"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </div>

    <!-- 第三行：操作按钮 -->
    <div class="search-row search-actions">
      <el-button type="primary" @click="search">查询</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </div>
</el-card>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="id" label="序号" width="60" />
      <el-table-column prop="allocateCode" label="调拨单号" width="160" />
      <el-table-column prop="outName" label="调出仓库" width="120" />
      <el-table-column prop="inName" label="调入仓库" width="120" />
      <el-table-column prop="transferDate" label="调拨日期" width="160" />
      <el-table-column prop="userName" label="调拨人" width="100" />
      <el-table-column prop="auditStatus" label="审核状态" width="100">
        <template #default="{ row }">
          {{ auditStatusMap[row.auditStatus] || '未知' }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="调拨状态" width="100">
        <template #default="{ row }">
          {{ orderStatusMap[row.status] || '未知' }}
        </template>
      </el-table-column>
      <el-table-column prop="num" label="装柜数量" width="100" />
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-link type="primary" @click="viewDetail(row)">详情</el-link>
          <el-link type="danger" style="margin-left:10px;" @click="deleteOrder(row.id)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      :total="total"
      layout="prev, pager, next, jumper, ->, total"
      style="margin-top: 20px; text-align: right;"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, onMounted } from "vue";
import { queryAllocate, deleteAllocate } from '@/api/allocate/allocate.js';

const router = useRouter();
const outName = ref('');
const inName = ref('');
const name = ref('');
const goodsCode = ref('');
const status1 = ref('');
const transferDate = ref('');
const tableData = ref([]);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
// 直接写死仓库列表选项
const warehouseList = ref(['北京总仓', '广州总仓', '仓库10']);
const allocateOrder = ref([]);
const auditStatusMap = {
  1: '未审核',
  2: '审核通过',
  3: '审核未通过'
};
const orderStatusMap = {
  1: '待处理',
  2: '处理中',
  3: '已完成'
};

// 初始化
async function init() {
  let queryParams = {
    allocateCode: '',
    auditStatus: status1.value ? parseInt(status1.value) : 0,
    goodsCode: goodsCode.value || '',
    inName: inName.value || '',
    name: name.value || '',
    outName: outName.value || '',
    page: page.value,
    pageSize: pageSize.value,
    transferDate: transferDate.value || ''
  };
  try {
    let res = await queryAllocate(queryParams);
    if (res.code === 200) {
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    } else {
      ElMessage.error('查询失败：' + (res.msg || '未知错误'));
    }
  } catch (error) {
    ElMessage.error('网络错误，请稍后重试');
  }
}

// 注释掉原来的接口请求方法，直接使用写死的仓库列表
// async function loadWarehouseList() {
//   try {
//     const res = await queryWarehouse();
//     if (res.code === 200) {
//       warehouseList.value = res.data || [];
//     } else {
//       ElMessage.error('获取仓库列表失败');
//     }
//   } catch (err) {
//     ElMessage.error('获取仓库列表出错');
//   }
// }

function search() {
  page.value = 1;
  init();
}

function reset() {
  outName.value = '';
  inName.value = '';
  name.value = '';
  goodsCode.value = '';
  status1.value = '';
  transferDate.value = '';
  page.value = 1;
  init();
}

function viewDetail(row) {
    router.push({
      path: "/allocateDetail",
      query: {
        id: row.id,
        inName: row.inName,
        outName: row.outName,
        transferDate: row.transferDate,
      }
    });
}

async function deleteOrder(id) {
  ElMessageBox.confirm('确定删除调拨序号为 ' + id + ' 的订单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      let res = await deleteAllocate(id);
      if (res.code === 200) {
        ElMessage.success('删除成功');
        init();
      } else {
        ElMessage.error('删除失败：' + (res.msg || '未知错误'));
      }
    } catch (error) {
      ElMessage.error('网络错误，请稍后重试');
    }
  });
}

function handlePageChange(newPage) {
  page.value = newPage;
  init();
}

onMounted(() => {
  // 不需要再调用接口加载仓库列表，直接使用写死的数据
  init();
});
</script>

<style scoped>
.search-card {
  padding: 12px 16px;
  margin-bottom: 15px;
  border-radius: 8px;
}
.search-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.search-item {
  flex: 1;
  min-width: 180px;
}
.search-actions {
  justify-content: flex-end;
  gap: 16px;
}
</style>
